import { PageContainer } from '@ant-design/pro-layout';
import React, { useState, useEffect, useRef } from 'react';
import { Button, Card, Col, Modal, Form, Input, Select, message } from 'antd';
import { connect, history } from 'umi';
import ProTable from '@ant-design/pro-table';

import { getTargetTreeAll } from './service';
import { getCommonEnums } from '@/services/common';

import { getAuth } from '@/utils/utils';
const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 4 },
};

const Video = ({ dispatch, submitting }) => {
  const actionRef = useRef();

  const auth = getAuth();
  const [form] = Form.useForm();
  const [selectList, setSelectList] = useState([]);

  const queryTargetTreeAll = async (params) => {
    if (!params.type) {
      return {
        data: [],
      };
    }
    const data = await getTargetTreeAll({ type: params.type });
    return {
      data,
    };
  };
  const querySelect = async () => {
    const res = await getCommonEnums({
      enumName: 'FunctionType',
    });
    if (res) {
      setSelectList(Object.values(res));
    }
  };

  // useEffect(() => {
  //   querySelect();
  // }, []);

  const columns = [
    {
      title: '目标名称',
      dataIndex: 'title',
      search: false,
    },
    {
      title: '视频数量',
      dataIndex: 'enableVideoCount',
      search: false,
    },

    {
      title: '视频禁用数',
      dataIndex: 'unAbleVideoCount',
      search: false,
    },
    {
      title: '目标类型',
      dataIndex: 'type',
      hideInTable: true,
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        return (
          <Select onFocus={selectList.length === 0 && querySelect} placeholder="请选择目标类型">
            {selectList.map((item) => (
              <Select.Option value={item.code} key={item.code}>
                {item.codeCn}
              </Select.Option>
            ))}
          </Select>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <Button size="small" onClick={() => handleUpdate(record)} type="success">
            编辑
          </Button>
        </>
      ),
    },
  ];

  const handleUpdate = (row) => {
    history.push({
      pathname: '/function/video/edit',
      query: {
        id: row.id,
      },
    });
  };

  return (
    <PageContainer>
      <Card>
        <ProTable
          rowKey="id"
          actionRef={actionRef}
          columns={columns}
          request={(params, sorter, filter) => queryTargetTreeAll(params)}
          pagination={false}
          expandable={{ childrenColumnName: 'functionTargetVos' }}
        />
      </Card>
    </PageContainer>
  );
};

export default connect(({ loading }) => ({
  submitting: loading.effects['functionAndVideo/create'],
}))(Video);
